<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </a-locale-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'

export default {
  data() {
    return {
      locale: zhCN,
    }
  },
  created() {
    let that = this
    enquireScreen(deviceType => {
      // tablet
      if (deviceType === 0) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      }
      // mobileß
      else if (deviceType === 1) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      } else {
        that.$store.commit('TOGGLE_DEVICE', 'desktop')
        that.$store.dispatch('setSidebar', true)
      }

    })
  }
}
</script>
<style>
#app {
  height: 100%;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: #fff!important;
}
.color-blue {
  color: #1890ff;
}

@media (max-width: 1450px) {
    .left_menu_side {
       height: 189px;
    }
  }

@media (min-width: 1450px) {
.left_menu_side{
  width: 100%;
height: 199px;
}
}
.ant-table {
  background: #fff;
  margin-bottom: 20px !important;
}

.ant-table-small {
  border: none !important;
}

.atable .ant-table-title+.ant-table-content {
  overflow: hidden;
  min-height: 180px;
  max-height: 180px;
}

.text-clip {
  display: block;
  width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

@media (min-width: 640px) {
  .text-clip {
    width: 140px;
  }
}

@media (min-width: 960px) {
  .text-clip {
    width: 180px;
  }
}

@media (min-width: 1200px) {
  .text-clip {
    width: 220px;
  }
}

@media (min-width: 1450px) {
  .text-clip {
    width: 300px;
  }
}

@media (min-width: 1600px) {
  .text-clip {
    width: 400px;
  }
}



.atable .ant-table-fixed-header .ant-table-scroll::-webkit-scrollbar {
  display: none;
}

.atable .ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar {
  display: none;
}

.atable .ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body::-webkit-scrollbar {
  display: none;
}

.ddi .ant-tabs {
  overflow: visible;
}


.atable .ant-table .ant-table-title a:first-child {
  margin-left: 10px;
  font-size: 16px !important;
}

.atable .ant-table-title a {
  /*font-size: 13px !important;*/
}


.atable .ant-table-body .ant-table-thead {
  border-top: 1px solid #e8e8e8;
}

.ant-table-small>.ant-table-title,
.ant-table-small>.ant-table-footer {
  /*padding: 5px 8px !important;*/
}

.ant-table-middle>.ant-table-title,
.ant-table-middle>.ant-table-footer {
  /*padding: 8px 8px !important;*/
}

.atable .ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
  top: 20px !important;
}

.atable .ant-table.ant-table-bordered .ant-table-title a {
  font-size: 16px !important;
}

.atable .ant-table-thead>tr>th,
.atable .ant-table-tbody>tr>td {
  padding: 4px 16px !important;
}

.atable .ant-table-bordered .ant-table-thead>tr>th,
.atable .ant-table-bordered .ant-table-tbody>tr>td {
  border-right: none;
  border-left: none;
}

.atable .ant-table-thead>tr>th {
  background: #fafafa !important;
}

.atable .ant-table-small .ant-table-content .ant-table-body {
  margin: 0 !important;
}

.atable .ant-table-small {
  border: none;
}

.atable .ant-table-content .ant-table-placeholder {
  position: static;
  margin-top: 10px;
}


.atable .ant-table .ant-table-placeholder {
  border-bottom: none !important;
}

.box-card .el-card__body {
  padding: 0;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}

html,
body,
ß ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
  margin: 0;
  padding: 0;
}

/*公共类*/
.fl {
  float: left
}

.fr {
  float: right
}

.hide {
  display: none!important;
}

.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
  clear: both;
}

.clearfix {
  zoom: 1;
}

a {
  /*color: #161616;*/
}

.a {
  margin-top: 0 !important;
  color: #777777 !important;
  font-size: 13px !important;
  font-weight: bold !important;
  float: right !important;
  margin-right: 30px !important;
}

ul , li {
  margin: 0;
  padding: 0;
}
.box-card > .el-card__header {
  padding: 6px 20px;
}
.box-card > .el-card__header span {
  width: 36px;
  height: 25px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 25px;
  color: rgba(22, 22, 22, 1);
  opacity: 1;
  margin-right: 20px;
}
.el-table td, .el-table th {
  padding: 6px 0!important;
}
.ant-tabs-bar {
  margin: 0 0 5px 0!important;
}
.ant-drawer-body{
  padding: 0px 0px!important;
}
</style>